<template>
	<div class="aq-pagination" v-if="paginationData.total">
		<el-pagination
			:current-page="paginationData.current"
			:page-size="paginationData.size"
			:page-sizes="paginationData.pageSizes ? paginationData.pageSizes : pageSizes"
      layout="slot,sizes, prev, pager, next, jumper,"
			:total="paginationData.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
    <template #default>
        <span class="totalcss">共 {{ paginationData.total }} 项数据</span>
      </template>
    </el-pagination>
  
	</div>
</template>

<script setup>
import { ref, reactive ,toRefs} from 'vue';

const props = defineProps({
	paginationData: {
		type: Object,
		default: {}
	}
});
// console.log('接收的传参', props.paginationData);
let pageSizes = reactive([10, 20, 40, 50,100]);
let layOut = ref('sizes, prev, pager, next, jumper');
if (pageSizes.indexOf(props.paginationData.size) == -1) {
	pageSizes.push(props.paginationData.size);
	pageSizes.sort((a, b) => {
		return a - b;
	});
}
let paginationData = reactive(props.paginationData);
const emit = defineEmits(['getData']);
const handleSizeChange = val => {
	paginationData.size = val;
	paginationData.current = 1;
	emit('getData');
};
const handleCurrentChange = val => {
	paginationData.current = val;
	emit('getData');
};
</script>

<style lang="scss">
.aq-pagination {
  overflow: hidden;
  padding: 20px 10px;

  .totalcss {
    position: absolute !important;
    bottom: 24px !important;
    left: 48px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: PingFang SC;
  }
	.el-input__wrapper {
		background-color: transparent;
	}
	.el-pagination button {
		background-color: transparent;
	}
	.el-pager li {
		background-color: transparent;
	}
}
</style>
